<template>
    <div>
      居民性别统计：
        <div id="pie" style="width: 800px;height:400px;"></div>
      <el-table
          :data="data"
          style="width: 100%">
        <el-table-column
            prop="name"
            label="性别">
        </el-table-column>
        <el-table-column
            prop="value"
            label="数量">
        </el-table-column>
        <el-table-column
            label="比例">
          <template slot-scope="scope">
            {{scope.row.bili}}%
          </template>
        </el-table-column>
      </el-table>
      <el-table
          :data="data[0]"
          style="width: 100%">
        <el-table-column
            label="合计">
        </el-table-column>
        <el-table-column
            :label="sum">
        </el-table-column>
        <el-table-column
            label="100%">
        </el-table-column>
      </el-table>
    </div>
</template>

    <script>
    import axios from 'axios';
    import * as echarts from 'echarts';
        export default {
            data() {
                return {
                  data:[],
                  sum:0,
                }
            },
            methods:{
              findSexAll(){
                axios.get("http://localhost:8205/sex/findSex").then(res=>{
                  this.initPie(res.data)
                })
              },
              showAll(){
                axios.get("http://localhost:8205/sex/showSex").then(res=>{
                  this.data=res.data;
                  this.sum=res.data[0].sum;
                })
              },
              initPie(data){
                var chartDom = document.getElementById('pie');
                var myChart = echarts.init(chartDom);
                var option;
                option = {
                  tooltip: {
                    trigger: 'item'
                  },
                  legend: {
                    top: '5%',
                    left: 'center'
                  },
                  series: [
                    {
                      name: '居民性别',
                      type: 'pie',
                      radius: ['50%', '70%'],
                      avoidLabelOverlap: false,
                      label: {
                        show: false,
                        position: 'center'
                      },
                      emphasis: {
                        label: {
                          show: true,
                          fontSize: 40,
                          fontWeight: 'bold'
                        }
                      },
                      labelLine: {
                        show: false
                      },
                      data:data
                    }
                  ]
                };
                option && myChart.setOption(option);
              }
            },
            created() {
              this.findSexAll();
            },
            mounted() {
              this.showAll();
              this.initPie();
            }
        }
</script>

<style scoped>

</style>